<style>
.question-form>.form-group>.form-control{
  margin-top:4px;
}
</style>
<template>
  <modal :show.sync="show" effect="zoom" title="修改问题">
    <div slot="modal-body" class="modal-body">
      <wizard :current-index.sync="progress.currentStep">
        <wizard-step title="输入新问题" :progress="progress.step1"> </wizard-step>
        <wizard-step title="验证新问题" :progress="progress.step2" :disable-previous="true"> </wizard-step>
        <wizard-step title="完成" :progress="progress.step3" :disable-previous="true"> </wizard-step>
      </wizard>
      <div>
        <new-question v-if="progress.currentStep === 0" :state.sync="state"></new-question>
        <verify-question v-if="progress.currentStep === 1" :state.sync="state"></verify-question>
        <complete-question v-if="progress.currentStep === 2" :state.sync="state"></complete-question>
      </div> 
      <div class="clearfix"></div>
    </div>
    <div slot="modal-footer"></div>
  </modal>
</template>
<script>
/**
 * @author guocailee
 */
import newQuestion from './newQuestion'
import verifyQuestion from './verifyQuestion'
import completeQuestion from './completeQuestion'

export default {
  props: {
    show: {
      required: true,
      type: Boolean,
      twoWay: true
    }
  },
  data: () => {
    let state = {
      newQuestionList: [{}, {}, {}, {}],
      answerList: []
    }
    let progress = {
      currentStep: 0
    }
    return { progress, state }
  },
  watch: {
    show (val) {
      if (!val) {
        this.progress.currentStep = 0
        this.state.newQuestionList = [{}, {}, {}, {}]
        this.state.answerList = []
      }
    }
  },
  events: {
    nexStep() {
      this.progress.currentStep++
    },
    prevStep() {
      this.progress.currentStep--
    },
    close() {
      this.show = false
    }
  },
  components: {
    newQuestion,
    verifyQuestion,
    completeQuestion
  }
}
</script>